<template>
  <div class="jay-desktop"
       @contextmenu.prevent.stop
       :style="{
        backgroundImage: `url(${bgImg})`
       }"
  >
    <div class="jay-desktop-main-container">
      <desk-main/>
    </div>
    <div class="jay-desktop-taskbar-container">
      <taskbar/>
    </div>

  </div>
</template>

<script>
  import DeskMain from '@/components/Desktop/Desk/index.vue'
  import Taskbar from '@/components/Desktop/Taskbar/index.vue'
  import { mapState } from 'vuex'
  export default {
    name: "Desktop",
    computed:{
      ...mapState('system',{
        bgImg: state => state.backgroundImg
      }),
    },
    components:{
      DeskMain,
      Taskbar,
    },
    mounted() {
      this.$store.dispatch('app/initApps')
    }
  }
</script>

<style lang="scss">
  .jay-desktop{
    height: 100%;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    /*background-position-x: 50%;*/
    &-main-container{
      overflow: hidden;
      width: 100%;
      height: $desktop-main-height;
      position: absolute;
      top: 0;
      left: 0;
    }
    &-taskbar-container{
      overflow: hidden;
      width: 100%;
      height: $taskbar-height;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
</style>